<template>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="活动信息" name="information">

            <el-form ref="form" :inline="true" :model="form" label-width="80px" style="text-align: left">

                <el-form-item label="活动名称">
                    <el-input v-model="form.activityName"></el-input>
                </el-form-item>

                <el-form-item label="活动主题">
                    <el-input v-model="form.participant"></el-input>
                </el-form-item>
            </el-form>

            <el-form ref="form" :inline="true" :model="form" label-width="80px" style="text-align: left">

                <el-form-item label="活动类型">
                    <el-select v-model="form.activityType" placeholder="请选择活动类型">
                        <el-option label="内部活动" value="internal"></el-option>
                        <el-option label="社教活动" value="socialistEducation"></el-option>
                        <el-option label="典礼仪式" value="ceremony"></el-option>
                        <el-option label="学术研讨" value="academic"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="活动地点">
                    <el-input v-model="form.participant"></el-input>
                </el-form-item>

            </el-form>

            <el-form ref="form" :model="form" label-width="80px" style="text-align: left">

                <el-form-item label="活动时间">
                    <div class="block">
                        <el-date-picker
                                v-model="form.activityTime"
                                type="datetime"
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </div>
                </el-form-item>

            </el-form>

            <el-form ref="form" :inline="true" :model="form" label-width="80px" style="text-align: left">

                <el-form-item label="参与单位">
                    <el-input v-model="form.participant"></el-input>
                </el-form-item>

<!--                主要参与人-->
                <el-form-item>
                    <span slot="label" style="white-space: nowrap;">主要参与人</span>
                    <el-input v-model="form.participant"></el-input>
                </el-form-item>

            </el-form>

            <el-form ref="form" :model="form" label-width="80px" style="text-align: left">

                <el-form-item label="活动描述">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="activityDescribe">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </el-form-item>

            </el-form>
        </el-tab-pane>

        <el-tab-pane label="上传活动图片" name="picture">
            <el-upload
                    class="upload-picture"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-preview="handlePicturePreview"
                    :on-remove="handlePictureRemove"
                    :file-list="fileList"
                    list-type="picture">
                <el-button size="small" type="primary" justify="start">选择图片文件夹</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

        </el-tab-pane>

        <el-tab-pane label="上传活动视频" name="vedio">
            <el-form-item label="上传视频" prop="videoUrl">

                <el-upload
                        class="avatar-uploader"
                        :action="actionUrl"
                        :show-file-list="false"
                        :on-success="handleVideoSuccess"
                        :before-upload="beforeUploadVideo"
                >
                    <video v-if="form.videoUrl1" :src="form.videoUrl1" class="avatar"></video>
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    <p v-if='load'> 上传中</p>
                    <P style="color:#000000">请保证视频格式正确，且不超过20M</P>

                </el-upload>

            </el-form-item>

        </el-tab-pane>
        <el-tab-pane label="上传活动音频" name="audio">

        </el-tab-pane>
        <el-tab-pane label="上传活动文件" name="file">
            <el-upload
                    class="upload-demo"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :on-change="handleFileChange"
                    :file-list="fileList">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-tab-pane>
    </el-tabs>
</template>
<script>
    export default {
        name: "Upload",
        components: {

        },
        data: function() {
            return {
                activeName: 'information',
                form: {
                    activityName: "",
                    activityType: "",
                    activityTime: "",
                    release: false,
                    participant:"",
                    resourceQuantity: "",
                    activityDescribe: ""
                },
                fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}],
                isShowUploadVideo: false,
                load: false
            };
        },
        methods: {
            handlePictureRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePicturePreview(file) {
                console.log(file);
            },
            handleFileChange(file, fileList) {
                this.fileList = fileList.slice(-3);
            }
        }
    };
</script>